<template>
  <div class="out">
    <!-- <el-scrollbar class="page-scroll"> -->
    <el-table :data="doc==null?doc:doc.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" height="430px">
      <el-table-column prop="account" label="识别序列" v-if="false"> </el-table-column>
      <el-table-column prop="username" label="医生" width="180"> </el-table-column>
      <el-table-column prop="level" label="级别" width="180"> </el-table-column>
      <el-table-column prop="department" label="科室" width="180"> </el-table-column>
      <el-table-column prop="fee" label="挂号费用"> </el-table-column>
      <el-table-column prop="" label="操作"> 
        <template class="appointment" slot-scope="scope">
						<el-button type="text" @click="clause(scope.row.account,scope.row.username,scope.row.level,scope.row.department,scope.row.fee)">预约门诊</el-button>
				</template>
      </el-table-column>
    </el-table>
    <div class="pagination" style="margin-top:15px;margin-left:350px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[3, 5, 10]"
                :page-size="pagesize"
                layout="prev, pager, next,jumper"
                :total="doc==null?0:doc.length">
            </el-pagination>
      </div>
    <!-- </el-scrollbar> -->


     <el-dialog title="挂号条款" :visible.sync="dialogVisible_clause" width="40%">
            <span style="font-size:10px">预约规则:本院实行实名制分时段预约挂号。请使用患者本人的我院诊疗卡或二代身份证,正确填写身份信息,如预约挂号使用的患者信息与就诊患者身份不符,此次预约挂号(含当日挂号)视为无效。 
              </span>
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_clause = false">取 消</el-button>
                <el-button type="primary" @click="appointment">我已阅读并同意以上条款</el-button>
            </span>
      </el-dialog>
      <el-dialog title="预约时间段" :visible.sync="dialogVisible" width="40%">
            <span style="font-size:10px" >
              <div class="time1">
                <el-button   size="medium" name="time1" @click="timechoose1($event.currentTarget.name)">08:00-10:30</el-button>
                <el-button   size="medium" name="time2" @click="timechoose2($event.currentTarget.name)">10:30-11:00</el-button>
                <el-button   size="medium" name="time3" @click="timechoose3($event.currentTarget.name)">11:00-12:00</el-button>
              </div>
              <div class="time2">
                <el-button   size="medium" name="time4" @click="timechoose4($event.currentTarget.name)">14:00-15:00</el-button>
                <el-button   size="medium" name="time5" @click="timechoose5($event.currentTarget.name)">15:00-16:00</el-button>
                <el-button   size="medium" name="time6" @click="timechoose6($event.currentTarget.name)">16:00-17:00</el-button>
              </div>
              <p style="margin-left:130px">选择时间仅为参考，以实际挂号时间为准！</p>
            </span>
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="Registrationdetails">确定</el-button>
            </span>
      </el-dialog>
      <el-dialog title="预约挂号详情" :visible.sync="dialogVisible_details" width="60%" height="60%">
            <span style="font-size:10px" class="details">
              <div>
                <div class="infoicon"> <div class="infoicon1"></div><div class="infoicon2">就诊信息</div></div> 
                <div class="info info1">
                  <span style="position:absolute;margin-top:8px;padding-left:15px;">就诊时间:{{$store.state.departmenttime2}}</span><br>
                  <span style="position:absolute;margin-top:8px;padding-left:15px;">门诊医生:{{attendingdoctorname}}</span><br>
                  <span style="position:absolute;margin-top:8px;padding-left:15px;">门诊分类:{{department}}</span><br>
                  <span style="position:absolute;margin-top:8px;padding-left:15px;">门诊级别:{{level}}</span><br>
                </div>
                <div class="infoicon"> <div class="infoicon1"></div><div class="infoicon2">剩余号源</div></div> 
                <div class="info info2">
                   <span>剩余号源:{{num}}</span>
                </div>
              </div>
              <div>
                <div class="infoicon"> <div class="infoicon1"></div><div class="infoicon2">就诊人</div></div> 
                <div class="info info2">
                 <span>{{$store.state.currentUser.username }}</span>
                </div>
              </div>
              <div>
                <div class="infoicon"> <div class="infoicon1"></div><div class="infoicon2">门诊费用</div></div> 
                <div class="info info2">
                  <span>门诊费用:{{fee}}</span>
                </div>
              </div>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_details = false">取消预约</el-button>
                <el-button type="primary" @click="confirm()">确认缴费</el-button>
            </span>
      </el-dialog>
       <el-dialog title="缴费窗口" :visible.sync="dialogVisible_fee" width="40%">
            <div>
              <img :src="url" alt="">
              <span style="font-size:20px;top:110px;left:120px;position:absolute">缴费成功!</span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_fee = false">关闭</el-button>
                <el-button type="primary" @click="back">返回</el-button>
            </span>
      </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "GIMedicine",
  data() {
    return {
      currentPage: 1,
      pagesize: 5,
      doc:[],//列表获取所有医生的信息
      dialogVisible_clause:false,//门诊条款窗口
      dialogVisible:false,//选择时间段窗口
      dialogVisible_details:false,//预约详情窗口
      dialogVisible_fee:false,//缴费窗口
      time:"",//用户最终选择的时间段
      attendingdoctor:"",//用户预约的门诊医生的account
      attendingdoctorname:"",//预约的医生名字
      level:"",//预约的级别
      department:"",//预约的部门
      fee:"",//门诊费用
      num:"",//选择的门诊号源
      url:require("@/assets/images/paysuccess.png")
    };
  },
  mounted(){
    this.queryDoc();
    this.$store.state.departmenttime3="";
  },
  computed:{
    departmenttimeData(){
      return this.$store.state.departmenttime;
    }
  },
  watch:{
    //深度监听变化
    departmenttimeData:{
      handler(nval,oval){
        console.log(nval,oval);
        this.querySelectDoc(nval);
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
     handleSizeChange(val) {
            this.pagesize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
    queryDoc() {
     var that = this;
      //如果用户没有选择日期 默认显示所有医生
        axios
        .post("http://localhost:8848/department/queryDoc", {
          department: "消化内科",
        })
        .then(function (response) {
          console.log(response);
          that.doc=response.data.data;
        });
    },
    querySelectDoc(navl){
        var that = this;
      //监听仓库里departmenttime的变化
        //判断一下选择的日期是周几  然后根据排班显示当天门诊医生
        // this.$store.state.departmenttime;
        var day=navl;
        // alert(this.$store.state.departmenttime.getDay())
        // console.log(this.$store.state.departmenttime);
        console.log("day"+day);
        axios
        .post("http://localhost:8848/rosteringManage/querySelectDoc", {
          department: "消化内科",
          selectday:day
        })
        .then(function (response) {
          console.log(response);
          that.doc=response.data.data;
        });
     
    },
    clause(account,username,level,department,fee){
      if(this.$store.state.departmenttime3==""){
         this.$message({
                    message:"请选择预约日期！",
                    type:"warn"
                })
      }else{
        //检查是否重复挂号
        var that=this;
        axios
        .post("http://localhost:8848/department/checkRepeat", {
          paccount:that.$store.state.currentUser.account,
          department:department,
          departmenttime:that.$store.state.departmenttime2,
          daccount:account
        })
        .then(function (response) {
          if(response.data.code==-1){
            that.dialogVisible_clause = true;
            that.attendingdoctor=account;
            that.attendingdoctorname=username;
            that.level=level;
            that.department=department;
            that.fee=fee;
          }else{
            that.$message({
                    message:"今日已预约！",
                    type:"warn"
                })
          }
        
        });

       

      }
       
    },
    appointment(){
       this.dialogVisible_clause = false;
       this.dialogVisible= true;
    },
    timechoose1(name){
      var date = new Date();
      if(this.$store.state.departmenttime3.toDateString()==date.toDateString())//判断是否当天
      {   //10:30
      var hour = date.getHours();
      var minutes = date.getMinutes(); 
      if(hour==10){//时相同判断分
        if(minutes>30){
          this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
        }else{
          this.time=name;
        }
      }else if(hour>10){
        this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
      }else{
          this.time=name;
      }
      }else{
        this.time=name;
      }
    },
    timechoose2(name){
      var date = new Date();
      if(this.$store.state.departmenttime3.toDateString()==date.toDateString())//判断是否当天
      {   //11:00
      var hour = date.getHours();
      var minutes = date.getMinutes(); 
      if(hour==11){//时相同判断分
        if(minutes>0){
          this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
        }else{
          this.time=name;
        }
      }else if(hour>11){
        this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
      }else{
          this.time=name;
      }
      }else{
        this.time=name;
      }

    },
    timechoose3(name){
      var date = new Date();
      if(this.$store.state.departmenttime3.toDateString()==date.toDateString())//判断是否当天
      {   //12:00
      var hour = date.getHours();
      var minutes = date.getMinutes(); 
      if(hour==12){//时相同判断分
        if(minutes>0){
          this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
        }else{
          this.time=name;
        }
      }else if(hour>12){
        this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
      }else{
          this.time=name;
      }
      }else{
        this.time=name;
      }

    },
    timechoose4(name){
      var date = new Date();
      if(this.$store.state.departmenttime3.toDateString()==date.toDateString())//判断是否当天
      {   //15:00
      var hour = date.getHours();
      var minutes = date.getMinutes(); 
      if(hour==15){//时相同判断分
        if(minutes>0){
          this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
        }else{
          this.time=name;
        }
      }else if(hour>15){
        this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
      }else{
          this.time=name;
      }
      }else{
        this.time=name;
      }
    },
    timechoose5(name){
      var date = new Date();
      if(this.$store.state.departmenttime3.toDateString()==date.toDateString())//判断是否当天
      {   //16:00
      var hour = date.getHours();
      var minutes = date.getMinutes(); 
      if(hour==16){//时相同判断分
        if(minutes>0){
          this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
        }else{
          this.time=name;
        }
      }else if(hour>16){
        this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
      }else{
          this.time=name;
      }
      }else{
        this.time=name;
      }
    },
    timechoose6(name){
      var date = new Date();
      if(this.$store.state.departmenttime3.toDateString()==date.toDateString())//判断是否当天
      {   //16:00
      var hour = date.getHours();
      var minutes = date.getMinutes(); 
      if(hour==17){//时相同判断分
        if(minutes>0){
          this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
        }else{
          this.time=name;
        }
      }else if(hour>17){
        this.$message({
                    message:"时间已过！请重新选择！",
                    type:"warn"
                })
      }else{
          this.time=name;
      }
      }else{
        this.time=name;
      }
    },
    Registrationdetails(){
        var that=this;
        axios
        .post("http://localhost:8848/department/timeChoose", {
          timechoose:that.time,
          account:that.attendingdoctor
        })
        .then(function (response) {
          if(response.data.code==-1){
                that.$message({
                    message:"该时间段号源为空！请重新选择！",
                    type:"warn"
                })
          }else{
              console.log("剩余号源"+response.data.data.num)
              that.num=response.data.data.num;
              that.dialogVisible= false,
              that.$message({
                    message:"预约成功！",
                    type:"success",
                    
              }),
              //显示预约成功后2秒进入预约详情页面。
              setTimeout(function(){that.dialogVisible_details=true},2000);
              
          }
         
        });
      
    },
    //预约成功
    confirm(){
        var that = this;
        axios
        .post("http://localhost:8848/department/appointmentPatients", {
          department: "消化内科",
          departmenttime:that.$store.state.departmenttime2,//预约时间
          paccount:that.$store.state.currentUser.account,//预约患者
          daccount:that.attendingdoctor//门诊医生
        })
        .then(function (response) {
          console.log(response);
        });
       that.dialogVisible_details = false;
      //  that.$message({
      //   message:"预约成功！",
      //   type:"success"
      //  })
      setTimeout(function(){that.dialogVisible_fee = true;},2000);
      that.$store.state.departmenttime3="";
    },
    back(){
      this.dialogVisible_fee = true;
      this.$router.go(-1);
    }
  },
};
</script>

<style lang="less" scoped>
.out{
  height: 500px;
}
.page-scroll {
    height: 100%;
    /deep/.el-scrollbar__wrap{
         overflow-x: hidden;  /* 隐藏横向的原生滚动条 */
          
    }
}
.time1{
  margin-left: 15%;
  padding-left: 15px;
}
.time2{
  margin-left: 15%;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-left: 15px;

}
// .details div{
//   width: 60%;
//   color: aquamarine;
// }
.infoicon{
  color:#479082;
}
.infoicon .infoicon1{
  float: left;
  width: 8px;
  height: 20px;
  background-color: #479082;
  border-radius: 5px;
}
.infoicon .infoicon2{
  margin-left: 20px;
  color: #479082;
  font-size: 15px;
}
.info{
  background-color: #eefaf2;
  margin-top: 15px;
  font-size: 15px;
}
.info1{
   height: 120px;

}
.info2{
    height: 50px;
}
.info span{
  position: absolute;
  padding-left: 15px;
}
.pagination{
  position: absolute;
  margin-top: 0px;
  left: 480px;

}
</style>